<template>
    <div class="vue3-modal">
        <h2>一、新特性</h2>
        <composition-comp
            title="1. 组合式API：把 data, computed, watch, methods, 生命周期等整合进 setup() 中"
            :initialCounter="initialCounter"
        />
        <teleport-comp title="2. Teleport 传送门：灵活指定父元素" />
        <fragment-comp title="3. 在 Vue 3.x 中，组件可以包含多个根节点" />
        <emits-comp
            title="4. emits: 在组件上定义发出的事件 -- 建议定义所有发出的事件，以便更好地记录组件应该如何工作"
            @changeCounter="changeInitialCounter"
        />
        <create-renderer title="5. custom renderer: 自定义渲染器，告诉 Vue 如何将虚拟dom渲染为真实dom -- 对跨平台编译有用" />
        <script-setup title="6. &lt; script setup &gt;单文件组件组合式 API 语法糖" ref="SSCNode" @sendMes="getMes"/>
        <h3>7. 单文件组件样式：&lt;style scoped &gt; || &lt;style module &gt;</h3>
    </div>
</template>

<script>
import CompositionComp from './components/composition/'
import TeleportComp from './components/teleport/'
import FragmentComp from './components/fragment/'
import EmitsComp from './components/emits/'
import CreateRenderer from './components/create-renderer/'
import ScriptSetup from './components/script-setup/'


import { ref, onMounted } from 'vue'

export default {
    components: {
        CompositionComp,
        TeleportComp,
        FragmentComp,
        EmitsComp,
        CreateRenderer,
        ScriptSetup,
    },
    setup() {
        const initialCounter = ref(0)
        const changeInitialCounter = () => {
            initialCounter.value += 10
        }

        // 获取通过 ref 引用的元素
        const SSCNode = ref(null)
        onMounted(() => {
            console.log('this.$refs.$ScriptSetupComp', SSCNode)
        })

        const getMes = () => console.log('getMes from ScriptSetup')

        return {
            initialCounter, changeInitialCounter, SSCNode, getMes
        }
    }
}
</script>

<style lang="scss" scoped>
</style>